<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
</body>
<script type="module">
    import { setCookie, getCookie } from "../js/cookie.js";
    import "../js/axios.min.js";

    // cookie的缺点:
    // 1. cookie不能跨网站  
    // 2. cookie不能跨浏览器 
    // 3. cookie可能被删除
    // 4. cookie可能被禁用
    // 5. cookie安全性不够高
    
    // 6. cookie 存储大小为4k ,  cookie的存储条数 一般为50条
    // 7. 在浏览器向服务器发送请求时  cookie会随着请求(请求可以携带一定的数据)一同发送给服务器, 会影响请求和响应的速率    (优点: 请求可以携带一定的数据   缺点: 想不想带都要到 ->  会影响请求和响应的速率)



    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];


    setBtn.onclick = function () {

        setCookie("user", "a123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "123123");
        setCookie("phone", "17386141517", 1 * 24 * 60 * 60);
        setCookie("email", "a123123@163.com", 31 * 24 * 60 * 60);

        // 存储数组和对象
        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };

        setCookie("arr", JSON.stringify(arr));
        setCookie("obj", JSON.stringify(obj));


        axios.get("../data/1.txt").then(txt => {
            console.log("fulfilled", txt);
        })

    }

    getBtn.onclick = function () {
        console.log(document.cookie);

    }



</script>

</html>